<template>
  <div
    class="match-item"
    :class="{
      'game-item--active': active,
    }"
  >
    <slot></slot>
    <div class="game-item__card">
      <app-info :column="1" :gap="4">
        <div class="status" :class="game.status ? 'status--success' : 'status--fail'">
          {{ game.status ? '成功' : '失败' }}
        </div>
        <app-info-item label="枪口：">
          {{ game.total_stake }}
        </app-info-item>
        <app-info-item label="综合赔率：">
          {{ compositeodd(game) }}
        </app-info-item>
        <app-info-item label="进度：">
          <app-flex>
            <app-flex-body>{{ game.success_stake }}</app-flex-body>
            <div class="percent">{{ game._percent }}%</div>
          </app-flex>
          <div class="progress-bar">
            <el-progress :percentage="game._percent" :show-text="false" color="var(--pcmain-color)" />
          </div>
        </app-info-item>
        <div class="rizhi" @click.stop="saverizhi">
          <img style="width: 16px; height: 16px; margin-right: 3px" src="@/assets/home/rizhi.png" />
        </div>
      </app-info>
    </div>

    <rizhiDialog
      v-model="rizhidialog.show"
      v-if="rizhidialog.show"
      :game="game"
      :bctype="bctype"
      :task="task"
    />
  </div>
</template>
<script setup>
import rizhiDialog from './components/rizhiDialog.vue'
const gameId = defineModel({ type: Number })
const props = defineProps({
  active: Boolean,
  game: Object,
  task: Object,
  bctype: String,
})

const rizhidialog = ref({
  show: false,
})

const saverizhi = () => {
  rizhidialog.value.show = true
}

const compositeodd = row => {
  let a = ''
  if (row.order_list.length > 0) {
    let num1 = 0
    let num2 = 0
    let num3 = 0
    row.order_list.forEach(item => {
      num1 += item.real_amount
      num2 += item.real_amount * item.place_odds_info
    })
    num3 = num2 / num1
    console.log(num3.toFixed(3))
    a = num3.toFixed(3)
  } else {
    a = '-'
  }

  return a
}
</script>
<style lang="scss" scoped>
.match-item {
  flex-shrink: 0;
}

.game-item__card {
  width: 188px;
  // height: 82px;
  padding: 16px;
  border-radius: 8px;
  background-color: #fafafa;
  margin-right: 8px;
  position: relative;
  cursor: pointer;
  border: 1px solid transparent;

  .status {
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 20px;
    padding: 2px 4px;
    border-radius: 8px 0 8px 0;
    font-size: 12px;
  }

  .status--success {
    background-color: rgba(2, 166, 110, 0.1);
    color: #02a66e;
    line-height: 16px;
    //   background: url('@/assets/home/success.png');
    //   background-size: cover;
  }
  .status--fail {
    background-color: rgba(248, 62, 62, 0.1);
    color: #f83e3e;
    line-height: 16px;

    //   background: url('@/assets/home/fail.png');
    //   background-size: cover;
  }

  .rizhi {
    position: absolute;
    right: 0;
    top: 0;
    // width: 23px;
    // height: 20px;
    // background: url('@/assets/home/rizhi.png');
    // background-size: contain;
    // background-repeat: no-repeat; /* 不平铺 */
  }
}

.game-item--active {
  .game-item__card {
    background-color: #fff;
    box-shadow: 0 4px 4px 0 rgba(71, 172, 255, 0.1);
    border-color: var(--pcmain-color);

    &:after {
      content: '';
      width: 8px;
      height: 8px;
      position: absolute;
      bottom: -5px;
      left: 50%;
      border-right: 1px solid var(--primary);
      border-bottom: 1px solid var(--primary);
      transform: rotate(45deg);
      background-color: #fff;
    }
  }
}

.progress-bar {
  margin-top: 2px;
}

.percent {
  color: var(--primary);
}

.game-item__info {
  margin-top: 8px;
  height: 200px;
}
</style>
